<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>烟花爆炸效果</title>
</head>
<style>    
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        height: 100vh;
        overflow: hidden;
    }
    #canvas{
        background-color: black;
    }
</style>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById("canvas");
        const ctx=canvas.getContext("2d");
        // //定义宽高
        canvas.width=window.innerWidth;
        canvas.height=window.innerHeight;
        var current=0;

        // //定义小球
        class Ball{
            constructor(x,y,dirx,diry,color){
                //起始位置
                this.x=x;
                this.y=y;
                this.dirx=dirx;
                this.diry=diry;
                //定义大小
                this.radius=3;
                //透明度量
                this.opcity=4;
                this.color=color;
            }
            //绘画函数
            draw(){
                ctx.beginPath();
                ctx.fillStyle=this.color;
                ctx.arc(this.x,this.y,this.radius,0,Math.PI*2);
                ctx.fill();
                ctx.closePath();
            }
            //更新
            update(){
                this.dirx *=0.99;
                this.diry *=0.99;
                this.diry +=0.1;
                this.x +=this.dirx;
                this.y +=this.diry;
                this.opcity-=0.01;
                this.draw()
            }
        }
        //定义小球容器
        const balls=[];
        function animate(){
            ctx.fillStyle="rgba(0,0,0,0.05)";
            ctx.fillRect(0,0,canvas.width,canvas.height);
            for(let i=0;i<balls.length;i++){
                balls[i].update();
                //透明度小于0.1的小球就删除
                if(balls[i].opcity<0.1){
                    balls.splice(i,1);
                }
            }
            if(this.current<=1){
                setTimeout(()=>{
                    this.current++;
                    let nums=100;
                    let hd=Math.PI*2/nums;
                    for(let i=0;i<nums;i++){
                        balls.push(new Ball(750,220,
                            Math.cos(Math.PI*2/nums*i)*(Math.random()*20),
                            Math.sin(Math.PI*2/nums*i)*(Math.random()*20),
                            //颜色
                            `hsl(${Math.random()*360},50%,50%)`
                        ))
                    }
                },500)
                setTimeout(()=>{
                    this.current++;
                    let nums=100;
                    let hd=Math.PI*2/nums;
                    for(let i=0;i<nums;i++){
                        balls.push(new Ball(150,220,
                            Math.cos(Math.PI*2/nums*i)*(Math.random()*20),
                            Math.sin(Math.PI*2/nums*i)*(Math.random()*20),
                            //颜色
                            `hsl(${Math.random()*360},50%,50%)`
                        ))
                    }
                },3000)
                setTimeout(()=>{
                    this.current++;
                    let nums=100;
                    let hd=Math.PI*2/nums;
                    for(let i=0;i<nums;i++){
                        balls.push(new Ball(1350,220,
                            Math.cos(Math.PI*2/nums*i)*(Math.random()*20),
                            Math.sin(Math.PI*2/nums*i)*(Math.random()*20),
                            //颜色
                            `hsl(${Math.random()*360},50%,50%)`
                        ))
                    }
                },3000)
            }
            
            //重复执行动画
            requestAnimationFrame(animate)
            
        }
        animate();

        //鼠标点击创建
        canvas.addEventListener('click',(e)=>{
            //每次创建数量
            let nums=500;
            // 每一个偏移的弧度
            let hd=Math.PI*2/nums;
            // 循环创建
            for(var a=0;a<5;a++){
                for(let i=0;i<nums;i++){
                    balls.push(new Ball(e.x,e.y,
                        Math.cos(hd*i)*(Math.random()*20),
                        Math.sin(hd*i)*(Math.random()*20),
                        //颜色
                        `hsl(${Math.random()*360},50%,50%)`
                    ))
                }
            }
        })
    </script>
</body>
</html>